/*
==================== 全局变量 & 常用样式 ====================
(注: 可单独引用)
目录(ctrl+F):
  ※1_全局变量
    ※2_字体相关  ※2_高宽相关  ※2_颜色相关
    ※2_border相关  ※2_shadow阴影  ※2_线

  ※1_常用样式
    ※2_特殊: my__must
    ※2_文本(换行/不换行): my__span-nowrap / my__span-wrap
    ※2_提示文字: my__tip / my__tip_red
*/

// ========== ※1_全局变量  ==========
page{
  --space: 32rpx; // 基本空间距离(页面 margin padding 所需)

  // ========== ※2_字体相关 ==========
  --fontSize_b4: 48rpx;
  --fontSize_b3: 44rpx;
  --fontSize_b2: 40rpx;
  --fontSize_b1: 36rpx;
  --fontSize: 32rpx; // 正文 16px
  --fontSize_s1: 28rpx;
  --fontSize_s2: 24rpx;

  --font_color_d: #333;
  --font_color: #666; // 正文
  --font_color_s: #999;
  --font_color_tip: #bbb; // 提示

  // ========== ※2_高宽相关 ==========
  --height_tabBar: 120rpx; // tabBar

  --height_item: 100rpx;
  --height_text: 80rpx; // 文本行高
  --height_button: 100rpx; // 按钮
  --height_form: calc(var(--fontSize) * 2); // 表单项

  // ========== ※2_颜色相关 ==========
  // --color_main: #034a99; // 主色调
  --color_bg: #f1f1f1; // 背景色

  --color_adorn1: rgb(3, 74, 153); // 装饰色1(主色调) #034a99
  --color_adorn2: rgb(107, 156, 212); // 装饰色2 #6b9cd4

  --color_red: rgb(255, 102, 102); // 红色 #ff6666
  --color_green: rgb(0, 153, 102); // 绿色 #009966

  // ========== ※2_border相关 ==========
  --borderRadius_b2: 24rpx; // 圆角 12px
  --borderRadius_b1: 16rpx; // 圆角 8px
  --borderRadius: 8rpx; // 圆角 4px

  // ========== ※2_shadow阴影 ==========
  --boxShadow1: 0 0 16rpx 0 rgba(0, 0, 0, .1);

  // ========== ※2_线 ==========
  --line1: 2rpx solid #ececec;
}

// ========== ※1_常用样式  ==========
// (注: 'my__'开头, 代码尽量超过两行再放入常用样式)

// ===== ※2_必填 my__must =====
.my__must{ // 必须用view
  position: relative;
  display: block;
  &::after{
    content: '*';
    line-height: 1;
    font-size: 1.2em;
    font-weight: bold;
    color: #ff0000;
    position: absolute;
    top: 0; right: 100%;
  }
}
.my__must-in{
  @extend .my__must;
  &::after{ left: 0; right: auto; }
}

// ===== ※2_文本(换行/不换行) my__span-nowrap / my__span-wrap =====
.my__span-nowrap { // 不换行
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my__span-wrap { // 换行
  // https://zhuanlan.zhihu.com/p/43601822
  max-width: 100%;
  white-space: normal;
  word-break: normal; // 控制单词如何被拆分换行
  word-wrap: break-word; // overflow-wrap 自动拆分单词
}

// ===== ※2_提示文字 my__tip =====
.my__tip{
  font-size: 12px;
  color: var(--font_color_tip);
}
.my__tip_red {
  @extend .my__tip;
  color: #ff0000;
}